<template>
  <div class="treeWrap">
    <!-- :treeData="treeList" -->
    <a-tree-select v-model="value" show-search style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" allow-clear tree-default-expand-all
      :replaceFields="replaceFields" :tree-data="treeList" placeholder="请选择公司" @change="onChange"
      v-if="treeList.length > 0" :filterTreeNode="filterTreeNode">
    </a-tree-select>
    <a-select v-else style="width: 100%" :disabled="true" placeholder="加载中"></a-select>
  </div>
</template>
<script>
export default {
  name: "FormTreeSelect",
  props: {
    onCallBack: {
      type: [Function],
      default: () => { },
    },
    formData: {
      type: Object,
      default: () => { },
    },
    dataIndex: {
      type: [String, Number],
      default: "",
    },
    treeList: {
      type: [Object, Array],
      default: [],
    },
  },
  data() {
    return {
      replaceFields: {
        children: "child",
        title: "name",
        key: "id",
        value: "id",
      },
      value: "",
    };
  },
  methods: {
    onChange(e) {
      // this.onCallBack(e, this.dataIndex);
      this.value = e;
    },
    filterTreeNode(e, treeNode) {
      let isBoolean = true;
      if(e && treeNode.data.props.name.includes(e)){
        isBoolean = true;
      }else{
        isBoolean = false;
      }
      return isBoolean;
    }
  },
  mounted() {
  },
  watch: {
    formData: {
      handler(nVal, oVal) {
        this.value = nVal[this.dataIndex] == "" ? null : nVal[this.dataIndex];
      },
      deep: true,
      immediate: true,
    },
    value: {
      handler(nVal, oVal) {
        if (nVal != this.formData[this.dataIndex]) {
          this.onCallBack(nVal ? nVal : "", this.dataIndex);
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
.treeWrap {
  width: 100%;
}
</style>
